<template>
  <div class="page-wrap">
    <div class="top-wrap"></div>
    <div class="spin-status">
      <el-row :gutter="20">
        <el-col :span="20">
          <div class="infos">
            <div><strong>机台编号：</strong>{{ pageInfo.机台编号 }}</div>
            <div><strong>锭数：</strong>{{ pageInfo.锭数 }}</div>
            <div><strong>纺纱时间：</strong>{{ pageInfo.纺纱时间 }}</div>
            <div><strong>纺纱进度：</strong>{{ pageInfo.纺纱进度 }}</div>
            <div><strong>品种：</strong>{{ pageInfo.产品名称 }}</div>
            <div><strong>支数：</strong>{{ pageInfo.支数 }}</div>
            <div><strong>设计捻度：</strong>{{ pageInfo.设计捻度 }}</div>
            <div><strong>实际捻度：</strong>{{ pageInfo.实际捻度 }}</div>
          </div>
          <div class="infos">
            <div><strong>机台产量：</strong>{{ pageInfo.机台产量 }}</div>
            <div><strong>锭子产量：</strong>{{ pageInfo.锭子产量 }}</div>
            <div><strong>实时能耗：</strong>{{ pageInfo.实时能耗 }}</div>
            <div><strong>断头：</strong>{{ pageInfo.断头 }}</div>
            <div><strong>实时平均锭速：</strong>{{ pageInfo.实时平均锭速 }}</div>
            <div><strong>主轴转速：</strong>{{ pageInfo.主轴转速 }}</div>
            <div><strong>温度：</strong>{{ pageInfo.温度 }}</div>
            <div><strong>湿度：</strong>{{ pageInfo.湿度 }}</div>
          </div>
          <div class="imgshow">
            <div class="ribbon-wrapper-1">
              <div v-if="pageInfo.运行状态 == '纺纱'" class="ribbon-1 green">{{ pageInfo.运行状态 }}</div>
              <div v-else-if="pageInfo.运行状态 == '停机'" class="ribbon-1 red">{{ pageInfo.运行状态 }}</div>
              <div v-else class="ribbon-1">{{ pageInfo.运行状态 }}</div>
            </div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="leftrool">
                  <div class="text">
                    <span>左前罗拉转速：{{ pageInfo.左前罗拉转速 }}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="text">
                  <div>左总牵伸:{{ pageInfo.左总牵伸 }}</div>
                  <div>预计剩余粗纱(kg):{{ pageInfo.预计剩余粗纱 }}</div>
                  <div>右总牵伸:{{ pageInfo.右总牵伸 }}</div>
                  <div>预计换粗纱时间(min):{{ pageInfo.预计换粗纱时间 }}</div>
                </div>
                <div class="img"><img src="@/assets/machineIntro2.gif" /></div>
              </el-col>
              <el-col :span="6">
                <div class="rightrool">
                  <div class="text">
                    <span>右前罗拉转速：{{ pageInfo.右前罗拉转速 }}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div v-for="(x, index) in pageList" :key="index" @click="goshow(x)" class="list">
            <el-row>
              <el-col :span="3">
                <el-radio v-model="ischecked" :label="x.机台编号">
                  <span></span>
                </el-radio>
              </el-col>
              <el-col :span="21">
                <div class="wrap">
                  <div class="title">
                    <el-row>
                      <el-col :span="6">
                        <span class="status"
                          ><el-tag v-if="x.运行状态 == '纺纱'" type="success" effect="dark">{{ x.运行状态 }}</el-tag>
                          <el-tag v-if="x.运行状态 == '落纱'" type="warning" effect="dark">{{ x.运行状态 }}</el-tag>
                          <el-tag v-if="x.运行状态 == '停机'" type="danger" effect="dark">{{ x.运行状态 }}</el-tag></span
                        >
                      </el-col>
                      <el-col :span="18" style="text-align: center"
                        ><strong>{{ x.产品名称 }}</strong></el-col
                      >
                      <el-col :span="6" style="text-align: right">{{ x.机台编号 }}</el-col>
                    </el-row>
                  </div>
                  <div class="data">产量 {{ x.产量 }}</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import dayjs from 'dayjs'
import Chart from '@/components/Charts/MixChart'
var spinlist = [{ label: '全部', value: '全部' }]
for (let i = 1; i < 100; i++) {
  spinlist.push({ label: i, value: i })
}
//console.log(BlockTitle)
export default {
  name: 'MachineInfo1',
  components: {
    Chart,
  },
  filters: {
    toTime(t) {
      return t ? dayjs(t).format('MM-DD HH:mm:ss') : '-'
    },

    twoNum(e) {
      return (e < 10 ? '0' : '') + e
    },
    thrNum(e) {
      return ('000' + e).slice(-3)
    },
    toDotTime(r) {
      const now = r.endTime ? dayjs(r.endTime) : dayjs()
      let t = now.diff(r.startTime, 'second')
      let timeStr = ''
      let converted = Math.floor(t / (24 * 60 * 60))
      if (converted > 0) timeStr += `${converted}天`
      t = t % (24 * 60 * 60)
      converted = Math.floor(t / (60 * 60))
      if (converted > 0) timeStr += `${converted}时`
      t = t % (60 * 60)
      converted = Math.floor(t / 60)
      if (converted > 0) timeStr += `${converted}分`
      converted = t % 60

      if (converted > 0) timeStr += `${converted}秒`
      return timeStr
    },
  },
  data() {
    return {
      except: '全部',
      timeRange: [],
      spinNum: '全部',
      spinlist,
      mid: '1234567890ABCDEF',
      sqlList: [
        {
          value: `select * from spin_exceptional where mid='000000000000000001' and inx = 0 order by side,inx,type,startTime `,
          label: 'all',
        },
      ],
      dataList: [],
      pageInfo: {},
      pageList: [],
      ischecked: '',
    }
  },
  computed: {},
  created() {
    this.getData()
    // const defaultSqlList = localStorage.getItem('sqlList_except')
    // if (defaultSqlList) this.sqlList = JSON.parse(defaultSqlList)
    // const defaultSql = localStorage.getItem('defaultSql_except')
    // if (defaultSql) this.sql = this.defaultSql = defaultSql
  },
  mounted() {
    window.dj = dayjs
    //console.log(dayjs)
  },
  methods: {
    async getData() {
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_cjsj_jt',
            params: [
              { isnum: false, value: dayjs(this.toDate).format('YYYY-MM-DD') },
              { isnum: true, value: 50 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        } else {
          this.pageList = res.list
          this.pageInfo = this.pageList[0]
          this.ischecked = this.pageList[0].机台编号
        }
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
    goshow(x) {
      this.pageInfo = x
      this.ischecked = x.机台编号
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.sub-item {
  width: 44px;
  text-align: center;
  border-right: 1px #eee solid;
  flex-shrink: 0;
}

.top-wrap {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.spin-status {
  width: 100%;
  margin-top: 10px;
  height: calc(100vh - 170px);

  .infos {
    background: rgba(6, 130, 244, 0.1);
    padding: 15px 15px 0 15px;
    border-radius: 4px;
    margin-bottom: 10px;

    div {
      display: inline-block;
      margin-bottom: 15px;
      width: 25%;
      font-size: 14px;
      font-weight: normal;

      strong {
        color: #0682f4;
      }
    }
  }
}

.list {
  width: 100%;
  display: inline-block;
  padding: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;

  .wrap {
    border: 1px solid rgba(6, 130, 244, 0.3);
    border-radius: 6px 6px 0 0;

    background: rgba(6, 130, 244, 0.05);

    .title {
      margin-bottom: 10px;
      padding: 10px;
      border-bottom: 1px solid #fff;
      border-radius: 6px 6px 0 0;
      font-size: 14px;
      position: relative;

      background: rgba(6, 130, 244, 0.3);

      .status {
        position: absolute;
        left: -10px;
        top: -10px;
      }
    }

    .data {
      padding: 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;

      span {
        flex: 2;
      }

      span.dt {
        text-align: right;

        em {
          margin-left: 10px;
          font-size: 20px;
          font-weight: bold;
          color: #ff0000;
          font-style: normal;
        }
      }
    }
  }
}

.imgshow {
  margin: 50px 0 20px 0;
  text-align: center;
  font-size: 14px;
  position: relative;

  .leftrool {
    width: 12rem;
    height: 15rem;
    display: inline-block;
    background: url(../../../assets/leftroolbg.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 100px;
    padding-top: 8rem;
    padding-left: 5rem;

    .text {
      position: absolute;
      bottom: 15px;
      width: 9rem;

      span {
        display: block;
        background: #89c6ff;
        margin-bottom: 10px;
        padding: 5px;
        text-align: left;
      }
    }
  }

  .rightrool {
    width: 12rem;
    height: 15rem;
    display: inline-block;
    background: url(../../../assets/rightroolbg.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 100px;
    padding-top: 8rem;
    padding-right: 5rem;

    .text {
      position: absolute;
      bottom: 15px;
      width: 9rem;

      span {
        display: block;
        background: #89c6ff;
        margin-bottom: 10px;
        padding: 5px;
        text-align: left;
      }
    }
  }

  .text {
    div {
      display: inline-block;
      width: 50%;
      margin: 5px 0;
    }
  }

  .img {
    margin-top: 50px;

    img {
      width: 100%;
    }
  }
}

.ribbon-wrapper-1 {
  width: 106px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  left: -6px;
}

.ribbon-1 {
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  -webkit-transform: rotate(-45deg);
  // -moz-transform: rotate(-45deg);
  // -ms-transform: rotate(-45deg);
  // -o-transform: rotate(-45deg);
  position: relative;
  padding: 7px 0;
  left: -31px;
  top: 15px;
  width: 122px;
  background-color: #6daaab;
  color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.ribbon-1:before,
.ribbon-1:after {
  content: '';
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px;
}

.red {
  background: #f56c6c;
}

.green {
  background: #67c23a;
}

.yellow {
  background: #e6a23c;
}

.green:before,
.green:after {
  border-top: 4px solid #67c23a;
}

.red:before,
.red:after {
  border-top: 4px solid #f56c6c;
}

.ribbon-1:before {
  left: 0;
}

.ribbon-1:after {
  right: 0;
}

// .main-container {
//   position: relative;
//   width: 100%;
//   height: calc(100vh - 84px);
// }
</style>
